{% extends "base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "主机信息" %}</title>
{{ block.super }}
{% endblock %}

{% block content %}
<div id="app" style="margin-top: 60px;">
    <el-row>
        <el-col :span="20" :offset="2">
            <el-row :gutter="40">
                <el-col :span="2" :offset="22">
                    <el-button id="addhost" @click="addHostDailog" type="primary">新增主机</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-form label-width="100px" v-model="searchHostForm">
                    <el-form-item label="选择业务：">
                        <el-select v-model="searchHostForm.biz" placeholder="请选择业务" style="width: 20%" clearable>
                            <el-option v-for="item in bizList" :label="item.name"
                                       :value="item.id + ':' +item.name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row :gutter="40">
                <el-form label-width="100px">
                    <el-form-item label="主机列表：">
                        <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }"
                                  style="width: 40%"
                                  v-model="searchHostForm.ip" placeholder="请输入主机IP(以分号隔开)：" clearable></el-input>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="2" :offset="22">
                    <el-button type="success" @click="getSearch">查询</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px;">
                <div id="table">
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            border>
                        <el-table-column type="index" label="序号" width="60"></el-table-column>
                        <el-table-column
                                prop="ip"
                                label="主机IP"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="os"
                                label="系统名">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="主机名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="cloud_area"
                                label="云区域">
                        </el-table-column>
                        <el-table-column
                                prop="mem"
                                label="Mem(%)">
                        </el-table-column>
                        <el-table-column
                                prop="disk"
                                label="Disk(%)">
                        </el-table-column>
                        <el-table-column
                                prop="cpu"
                                label="Cpu(%)">
                        </el-table-column>
                        <el-table-column label="操作" width="400">
                            <template slot-scope="scope">
                                <!--                    跳转方法1 -> @click绑定方法-->
                                <!--                    window.location.href=site_url+'report/?id='+scope.row.id-->
                                <el-button type="success" @click="getMonitor(scope.row)" size="small">
                                    查看性能
                                </el-button>
                                <!--                    跳转方法2 -> a标签href属性：-->
                                <!--                    <el-button>-->
                                <!--                        <el-link :href="'{{SITE_URL}}report/?id='+scope.row.id">-->
                                <!--                            查看性能-->
                                <!--                        </el-link>-->
                                <!--                    </el-button>-->
                                <el-button v-if="scope.row.is_monitor == '未监控'" type="primary"
                                           @click="addMonitor(scope.row)" size="small">
                                    加入监控
                                </el-button>
                                <el-button v-if="scope.row.is_monitor == '已监控'" @click="deleteMonitor(scope.row)"
                                           type="warning" size="small">取消监控
                                </el-button>
                                <el-button type="warning" @click="deleteData(scope.row)" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-row>
        </el-col>
    </el-row>
    <el-dialog title="新增主机" :visible.sync="dialogVisible" width="60%">
        <el-form :model="hostForm">
            <el-form-item label="选择业务：">
                <el-select v-model="hostForm.biz" placeholder="请选择" @change="searchSet">
                    <el-option
                            v-for="item in bizList"
                            :label="item.name"
                            :value="item.id + ':' + item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择集群：">
                <el-select v-model="hostForm.set" placeholder="请选择" @change="searchHost">
                    <el-option v-for="item in setList" :label="item.bk_set_name" :value="item.bk_set_id + ':' + item.bk_set_name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择主机：">
                <el-select v-model="hostForm.innerip" placeholder="请选择">
                    <el-option v-for="item in hostList" :label="item.innerip" :value="item.innerip"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addData">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    window.onload = function () {
        new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data() {
                return {
                    tableData: [],
                    dialogVisible: false,
                    host: "",
                    bizList: [],
                    setList: [],
                    hostList: [],
                    hostForm: {},
                    biz_id: "",
                    innerip: "",
                    chartVisible: false,
                    direction: "rtl",
                    hostID: "",
                    hostSpan: "",
                    searchHostForm: {},
                }
            },
            computed: {},
            watch: {},
            created() {
                this.getSearch()
                this.getBusiness()
            },
            mounted() {
            },
            methods: {
                getSearch() {
                    axios.post(site_url + 'get_search_host/' , this.searchHostForm).then(res => {
                        if (res.data.result) {
                            this.$message({
                                message: '查询成功',
                                type: 'success'
                            })
                            this.tableData = res.data.data
                        }
                    })
                },
                getBusiness() {
                    axios.get(site_url + 'search_biz/').then(res => {
                        this.bizList = res.data.data
                    })
                },
                addHostDailog() {
                    this.hostForm = {}
                    this.dialogVisible = true
                },
                searchSet() {
                    let params = {"biz": this.hostForm.biz}
                    axios.get(site_url + 'search_set/', {params: params}).then(res => {
                        this.setList = res.data.data
                    })
                },
                searchHost() {
                    let params = {
                        "set": this.hostForm.set
                    }
                    axios.get(site_url + 'search_host/', {params: params}).then(res => {
                        this.hostList = res.data.data
                        console.log(this.hostList)
                    })
                },
                addData() {
                    axios.post(site_url + 'add_host/', this.hostForm).then(res => {
                        if (res.data.result) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            this.dialogVisible = false
                            this.getSearch()
                        } else if (res.data.result === 0) {
                            this.$message({
                                message: res.data.data,
                                type: 'warning'
                            })
                        } else {
                            this.$message({
                                message: '请勿添加重复主机',
                                type: 'error'
                            })
                        }
                    })
                },
                getMonitor(row) {
                    let params = {
                        "row_id": row.id
                    }
                    this.$confirm('正在监控主机性能，是否继续?', {
                        type: 'warning'
                    }).then(() => {
                        axios.get(site_url + 'get_host_monitor', {params: params}).then(res => {
                            if (res.data.result === true) {
                                this.$message({
                                    message: '已加入监控',
                                    type: 'success'
                                });
                                row.mem = res.data.data.mem;
                                row.cpu = res.data.data.cpu;
                                row.disk = res.data.data.disk;
                            } else {
                                this.$message.error("监控失败")
                            }
                        })
                    })
                },
                deleteMonitor(row) {
                    let params = {
                        "row_id": row.id
                    }
                    this.$confirm('正在监控主机性能，是否继续?', {
                        type: 'warning'
                    }).then(() => {
                        axios.get(site_url + 'delete_host_monitor', {params: params}).then(res => {
                            if (res.data.result === true) {
                                this.$message({
                                    message: '已取消监控',
                                    type: 'success'
                                });
                                this.getSearch();
                                //
                                // row.mem = res.data.data.mem;
                                // row.cpu = res.data.data.cpu;
                                // row.disk = res.data.data.disk;
                            } else {
                                this.$message.error("取消失败")
                            }
                        })
                    })
                },
                addMonitor(row) {
                    let params = {
                        "row_id": row.id
                    }
                    this.$confirm('正在查询主机信息，是否继续?', {
                        type: 'warning'
                    }).then(() => {
                        axios.get(site_url + 'add_host_monitor', {params: params}).then(res => {
                            if (res.data.result === true) {
                                this.$message({
                                    message: '查询成功',
                                    type: 'success'
                                });
                                this.getSearch();
                                // row.mem = res.data.data.mem;
                                // row.cpu = res.data.data.cpu;
                                // row.disk = res.data.data.disk;
                            } else {
                                this.$message.error("查询错误")
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消查询'
                        })
                    })
                },
                deleteData(row) {
                    let params = {
                        "row_id": row.id
                    }
                    this.$confirm('正在删除主机信息，是否继续?', {
                        type: 'warning'
                    }).then(() => {
                        axios.get(site_url + 'delete_host', {params: params}).then(res => {
                            if (res.data.result === true) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getSearch()
                            } else {
                                this.$message.error("删除错误")
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })

                },
                perentData(row) {
                    this.reportLink(row)
                    // this.chartVisible = true
                    // this.presentEchart(row)

                },
                reportLink(row) {
                    this.hostID = row.id
                    // axios.get(site_url + 'report_link/?id=' + row.id).then(res => {
                    //     if (res.data.result) {
                    //         this.$message("查看主机报告")
                    //     }
                    // })
                    window.location.href = site_url + 'report/?id=' + this.hostID
                },
                connectBackend() {
                    $.ajax({
                        url: site_url + 'connect_bak/',
                        type: 'GET',
                        data: {"days": 1},
                        success: function (res) {
                            this.resData = res.data
                            {
                                this.$message('这是一条消息提示')
                            }
                        }
                    })
                },
                connectBackend2() {
                    //需要vue-resource.min.js
                    //发送get请求
                    // function (res) 可以改成 res =>
                    // res数据格式如下:
                    // data: Object
                    // url: "/connect_bak"
                    // ok: true
                    // status: 200
                    // statusText: "OK"
                    // headers: I {map: {…}}
                    // body: {data: "链接成功"}
                    // bodyText: "{"data": "\u94fe\u63a5\u6210\u529f"}"
                    //__proto__: Object
                    axios.get(site_url + 'connect_bak').then(function (res) {
                        this.resData = res.data.data
                        console.log(res)
                    }, function () {
                        console.log('请求失败处理')
                    });
                },
                presentEchart(row) {
                    console.log(document.getElementById("chartDemo"))
                    let myChart = echarts.init(document.getElementById("chartDemo"));

                    // 指定图表的配置项和数据
                    let option = {
                        title: {
                            text: 'ECharts 入门示例' + toString(row.name)
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
            }
        })
    }
</script>
<style>
    /*#addhost {*/
    /*    float: right;*/
    /*    position: relative;*/
    /*    right: 50px*/
    /*}*/
</style>

{% endblock %}